<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<canvas id="test" width="1000" height="500" style="border:1px black solid">
    <span>您的浏览器不支持画布元素 请您换成谷歌浏览器</span>
</canvas>
<script type="text/javascript">
    //		同步思维  有别于浏览器本身的渲染机制
    var canvas = document.querySelector("#test");
    var ctx = canvas.getContext("2d");
    //画布宽度
    var w=1000;
    //画布高度
    var h=500;
    /**
     * 格子
     * @param num 格子内显示的数字
     * @param x 起始坐标x轴
     * @param y 起始坐标y轴
     * @param long 正方形边长
     */
    function Box(num,x,y,long){
        this.num=num;
        this.x=x;
        this.y=y;
        this.long=long;
    }

    //定义格子显示方法
    Box.prototype.show=function (){
        //设置填充颜色
        ctx.fillStyle="green";
        //画矩形（起始横坐标，起始点纵坐标，长，宽）
        ctx.fillRect(this.x,this.y,this.long,this.long)
        //文字颜色
        ctx.fillStyle="white";
        //设置文字水平居中
        ctx.textAlign='center';
        //设置文字垂直居中
        ctx.textBaseline='middle'
        ctx.font='25px 微软雅黑'
        //设置文字的起始x坐标为方块的中心
        var textX=this.x+this.long*0.5
        var textY=this.y+this.long*0.5
        // 绘制文字
        ctx.fillText(this.num, textX, textY);
    }
    //定义格子运动的方法
    Box.prototype.move=function (){
        this.x=this.x+1;
        this.y=this.y+1;
    }
    var a=0
    var b=0
    var speed=1;
   var timer= setInterval(function () {
        ctx.clearRect(0,0,w,h);

        var box1=new Box(99,a,b,50);
        box1.show();
        box1.move()
        a=a+speed;
        b=b+speed;
       if(b===200){
           clearInterval(timer);
       }
    },10)









    /**
     * 画格子
     * @param num 格子内显示的数字
     * @param x 起始坐标x轴
     * @param y 起始坐标y轴
     * @param width 正方形边长

     */
    // function drawBox(num,x,y,width){
    //     //设置填充颜色
    //     ctx.fillStyle="green";
    //     //画矩形（起始横坐标，起始点纵坐标，长，宽）
    //     ctx.fillRect(x,y,width,width)
    //     //文字颜色
    //     ctx.fillStyle="white";
    //     //设置文字水平居中
    //     ctx.textAlign='center';
    //     //设置文字垂直居中
    //     ctx.textBaseline='middle'
    //     // ctx.fillStyle="black";
    //     ctx.font='25px 微软雅黑'
    //     // ctx.fillText(num,x+18,y+32)
    //     //  var textX=x+width*0.5 - ctx.measureText(num).width* 0.5
    //     // var textY=y+32
    //     var textX=x+width*0.5
    //     var textY=y+width*0.5
    //     ctx.fillText(num, textX, textY); // 绘制文字
    // }


    /**
     *
     * @param x 目标点x坐标
     * @param y 目标点y坐标
     */
    function move(x,y){

    }


</script>

</body>
</html>